<!DOCTYPE html>

<html lang="en">

<head>
  <title>Editor | Heartex</title>
  <link href="https://app.heartex.ai/static/css/main.css" rel="stylesheet" />
  <script src="https://app.heartex.ai/static/js/jquery.min.js"></script>

  <!-- Editor CSS -->

  <link href="https://app.heartex.ai/playground/css/main.css" rel="stylesheet" />

  <!-- Editor JS -->

  <script src="https://app.heartex.ai/playground/js/main.js"></script>

  <script src="https://app.heartex.ai/static/sdk/htx-docker-init-v1.0.0.js"></script>

  <style>
    body,
    html {
      background: none !important;
    }

    body::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 2px rgba(178, 178, 178, 0.3) !important;
      background-color: #f5f5f5 !important;
    }

    body::-webkit-scrollbar {
      width: 2px !important;
      height: 2px !important;
      background-color: #f5f5f5 !important;
    }

    body::-webkit-scrollbar-thumb {
      background-color: #c3c3c3 !important;
      border: 2px solid #b4b4b4 !important;
    }

    #label-studio div[class^="App_editor"],
    div[class*="App_editor"] {
      width: 95% !important;
      min-width: 95% !important;
      max-width: 95% !important;
    }

    #label-studio .ls-segment {
      top: 0;
    }
  </style>
</head>

<body>
  <div id="label-studio">
    <div class="ui loader active inline centered"></div>
  </div>

  <script id="task-data" type="application/json">
      {
        "id": 6077,
        "data": {
          "image": "https://app.heartex.ai/static/samples/sample.jpg",
          "text": "To have faith is to trust yourself to the water"
        },
        "completions": null,
        "predictions": null,
        "project": 1,
        "accuracy": 0,
        "created_at": "2024-03-10T02:46:32.000000Z",
        "updated_at": "2024-03-10T02:46:32.000000Z"
      }
    </script>

  <script>
    $(function () {
      window.USE_DRAFTS = false;

      // New Label Studio instance with integrated task data
      var Htx = new HeartexSDK({
        elid: "label-studio",
        config: `
          <View>
            <!-- Image with Polygons -->
            <View style="padding: 25px; box-shadow: 2px 2px 8px #AAA">
              <Header value="Label the image with polygons"/>
              <Image name="img" value="$image"/>
              <Text name="text1" value="Select label, start to click on image"/>

              <PolygonLabels name="tag" toName="img">
                <Label value="Airbus" background="blue"/>
                <Label value="Boeing" background="red"/>
              </PolygonLabels>
            </View>

          </View>
          `,
        user: { pk: 1, firstName: "Awesome", lastName: "User" },
        project: 1,
        options: { secureMode: false },
        interfaces: [
          "basic",
          "panel", // undo, redo, reset panel
          "side-column", // entity
        ],
      });

      Htx.showTask(
        JSON.parse(document.getElementById("task-data").textContent),
        { addInitial: true, loadCompletionIfExists: true }
      );
    });
  </script>
</body>

</html>